<template>
    <div class="img-uploader">
        <ul>
            <li class="img" v-for="(src,i) in value" :key="src">
                <el-image
                    class="priview"
                    :src="src"
                    fit="cover"
                    :preview-src-list="[src]"
                ></el-image>
                <span class="close" @click="remove(i)">
                    <i class="el-icon-close"></i>
                </span>
            </li>
            <li class="add" v-if="value.length < maxNum">
                <label>
                    <div class="trigger">
                        <i v-if="loading" class="el-icon-loading"></i>
                        <i v-else class="el-icon-plus"></i>
                    </div>
                    <input
                        class="uploader"
                        :multiple="maxNum - value.length !== 1"
                        type="file"
                        accept="image/jpeg, image/png, image/gif"
                        @change="handChange"
                    />
                </label>
            </li>
        </ul>
    </div>
</template>

<script>
import { upload } from "@/api/common"

export default {
    name: "MultImgUploader",
    props: {
        maxNum: {
            type: Number,
            default: 1,
        },
        value: Array,
    },
    data() {
        return {
            loading: false,
            list: [],
            fileList: [],
        };
    },
    methods: {
        handChange(e) {
            this.fileList = Array.prototype.slice.call(e.target.files);
            if (this.fileList.length > this.maxNum - this.value.length) {
                return this.$message.warning(
                    "限制" +
                        this.maxNum +
                        "张图片，已上传" +
                        this.value.length +
                        "张，请选择不大于" +
                        (this.maxNum - this.value.length) +
                        "张的照片"
                );
            }
            const typeList = ["image/jpeg", "image/png", "image/gif"];

            for (let i = 0; i < this.fileList.length; i++) {
                const file = this.fileList[i];
                if (typeList.indexOf(file.type) < 0) {
                    return this.$message.warning(
                        "请选择jpg、png或gif格式的图片"
                    );
                }
            }
            this.upload();
        },
        async upload() {
            this.loading = true;
            const file = this.fileList[0];
            const params = new FormData()
            params.append('file', file)
            try {
                const {errno, data } = await upload(params);
                if (errno === 0) {
                    this.list.push(data);
                    this.fileList.shift();
                    if (this.fileList.length) {
                        this.upload();
                    } else {
                        this.loading = false;
                        this.$emit("input", [...this.value, ...this.list]);
                        this.list = [];
                    }
                } else {
                    this.$message.warning(file.fileName + "上传失败");
                }
            } catch (err) {
                this.loading = false;
                console.log("err", err);
            }
        },
        remove(i){
            const tempList = [...this.value]
            tempList.splice(i,1)
            this.$emit("input", tempList);
        }
    },
};
</script>

<style lang="scss" scoped>
.img-uploader {
    ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        li {
            width: 120px;
            height: 120px;
            list-style: none;
            margin-right: 10px;
            border-radius: 4px;
            &.img {
                position: relative;
                .priview {
                    width: 100%;
                    height: 100%;
                    border-radius: 4px;
                }
                .close {
                    position: absolute;
                    right: -8px;
                    top: -8px;
                    width: 22px;
                    height: 22px;
                    line-height: 22px;
                    text-align: center;
                    background-color: #fff;
                    border-radius: 22px;
                    color: #333;
                    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
                }
            }
            &.add {
                border: 1px dashed #eaeaea;
                background-color: #fff;
                .uploader {
                    display: none;
                }
                .trigger {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    i {
                        font-size: 30px;
                        color: #666;
                    }
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }
                &:hover {
                    border-color: #1890ff;
                }
            }
        }
    }
}
</style>